'use client';

import { Button } from "@/components/ui/button";
import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "@/components/ui/card";
import { Input } from "@/components/ui/input";
import { Label } from "@/components/ui/label";
import { Checkbox } from "@/components/ui/checkbox";
import { Alert, AlertDescription, AlertTitle } from "@/components/ui/alert";
import { Badge } from "@/components/ui/badge";
import { useState } from "react";
import { AlertCircle, CheckCircle, Info } from "lucide-react";

export default function ShadcnLearnPage() {
  const [count, setCount] = useState(0);
  const [inputValue, setInputValue] = useState("");
  const [checked, setChecked] = useState(false);

  return (
    <div className="container mx-auto py-8">
      <Card className="mb-8">
        <CardHeader className="text-center">
          <CardTitle className="text-4xl">shadcn/ui 学习指南</CardTitle>
          <CardDescription className="text-lg">
            探索和学习如何使用 shadcn/ui 构建美观且功能强大的 React 组件
          </CardDescription>
        </CardHeader>
      </Card>

      {/* Alert Section */}
      <div className="mb-8 space-y-4">
        <Alert>
          <Info className="h-4 w-4" />
          <AlertTitle>提示</AlertTitle>
          <AlertDescription>
            这是一个默认的提示信息组件，用于向用户显示中性信息。
          </AlertDescription>
        </Alert>
        <Alert variant="destructive">
          <AlertCircle className="h-4 w-4" />
          <AlertTitle>错误</AlertTitle>
          <AlertDescription>
            这是一个错误提示组件，用于向用户显示错误或危险信息。
          </AlertDescription>
        </Alert>
        <Alert>
          <CheckCircle className="h-4 w-4" />
          <AlertTitle>成功</AlertTitle>
          <AlertDescription>
            这是一个成功提示组件，用于向用户显示操作成功的消息。
          </AlertDescription>
        </Alert>
      </div>

      <div className="grid grid-cols-1 lg:grid-cols-2 gap-8">
        {/* Buttons Section */}
        <Card>
          <CardHeader>
            <CardTitle>按钮组件</CardTitle>
            <CardDescription>不同样式和尺寸的按钮示例</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap gap-4">
              <Button>默认按钮</Button>
              <Button variant="destructive">危险按钮</Button>
              <Button variant="outline">轮廓按钮</Button>
              <Button variant="secondary">次要按钮</Button>
              <Button variant="ghost">幽灵按钮</Button>
              <Button variant="link">链接按钮</Button>
            </div>
            <div className="flex flex-wrap gap-4">
              <Button size="sm">小按钮</Button>
              <Button size="default">默认按钮</Button>
              <Button size="lg">大按钮</Button>
            </div>
            <div className="flex flex-wrap gap-4">
              <Button disabled>禁用按钮</Button>
              <Button onClick={() => setCount(count + 1)}>
                点击计数: {count}
              </Button>
            </div>
          </CardContent>
        </Card>

        {/* Input Section */}
        <Card>
          <CardHeader>
            <CardTitle>输入组件</CardTitle>
            <CardDescription>不同类型的输入框示例</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="space-y-2">
              <Label htmlFor="default-input">默认输入框</Label>
              <Input 
                id="default-input" 
                placeholder="请输入文本..." 
                value={inputValue}
                onChange={(e) => setInputValue(e.target.value)}
              />
            </div>
            <div className="space-y-2">
              <Label htmlFor="disabled-input">禁用输入框</Label>
              <Input id="disabled-input" placeholder="禁用状态" disabled />
            </div>
            <div className="space-y-2">
              <Label htmlFor="email-input">邮箱输入框</Label>
              <Input id="email-input" type="email" placeholder="name@example.com" />
            </div>
            <div className="space-y-2">
              <Label htmlFor="password-input">密码输入框</Label>
              <Input id="password-input" type="password" placeholder="输入密码" />
            </div>
            <CardDescription>当前输入值: {inputValue}</CardDescription>
          </CardContent>
        </Card>

        {/* Checkbox Section */}
        <Card>
          <CardHeader>
            <CardTitle>复选框组件</CardTitle>
            <CardDescription>复选框的使用示例</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex items-center space-x-2">
              <Checkbox 
                id="terms" 
                checked={checked}
                onCheckedChange={(checked) => setChecked(checked as boolean)}
              />
              <Label
                htmlFor="terms"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                我同意服务条款和隐私政策
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="disabled" disabled />
              <Label
                htmlFor="disabled"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                禁用的复选框
              </Label>
            </div>
            <div className="flex items-center space-x-2">
              <Checkbox id="checked" defaultChecked />
              <Label
                htmlFor="checked"
                className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
              >
                默认选中的复选框
              </Label>
            </div>
            <CardDescription>
              复选框状态: {checked ? "已选中" : "未选中"}
            </CardDescription>
          </CardContent>
        </Card>

        {/* Badge Section */}
        <Card>
          <CardHeader>
            <CardTitle>徽章组件</CardTitle>
            <CardDescription>不同样式和尺寸的徽章示例</CardDescription>
          </CardHeader>
          <CardContent className="space-y-4">
            <div className="flex flex-wrap gap-4">
              <Badge>默认徽章</Badge>
              <Badge variant="secondary">次要徽章</Badge>
              <Badge variant="destructive">危险徽章</Badge>
              <Badge variant="outline">轮廓徽章</Badge>
            </div>
            <div className="flex flex-wrap gap-4">
              <Badge>新</Badge>
              <Badge variant="secondary">更新</Badge>
              <Badge variant="destructive">错误</Badge>
            </div>
          </CardContent>
        </Card>
      </div>

      {/* Card Section */}
      <Card className="mt-8">
        <CardHeader>
          <CardTitle>卡片组件</CardTitle>
          <CardDescription>卡片的不同用法示例</CardDescription>
        </CardHeader>
        <CardContent>
          <CardDescription>这是一个卡片内容区域，可以放置任何内容。</CardDescription>
          <CardDescription className="mt-2">卡片组件通常用于展示相关信息的集合。</CardDescription>
        </CardContent>
        <CardFooter>
          <Button>卡片底部操作</Button>
        </CardFooter>
      </Card>

      {/* Features Section */}
      <div className="mt-12">
        <Card className="mb-6">
          <CardHeader>
            <CardTitle className="text-3xl text-center">shadcn/ui 的核心优势</CardTitle>
          </CardHeader>
        </Card>
        <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
          <Card>
            <CardHeader>
              <CardTitle>可访问性</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription>所有组件都遵循 WAI-ARIA 标准，确保残障用户也能正常使用。</CardDescription>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>可定制性</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription>基于 Tailwind CSS 构建，可以轻松通过配置和样式类进行定制。</CardDescription>
            </CardContent>
          </Card>
          <Card>
            <CardHeader>
              <CardTitle>无运行时依赖</CardTitle>
            </CardHeader>
            <CardContent>
              <CardDescription>组件是无头的，不包含任何运行时依赖，减少包体积。</CardDescription>
            </CardContent>
          </Card>
        </div>
      </div>

      {/* Installation Guide */}
      <Card className="mt-12">
        <CardHeader>
          <CardTitle>安装和使用</CardTitle>
          <CardDescription>如何在项目中使用 shadcn/ui</CardDescription>
        </CardHeader>
        <CardContent>
          <div className="space-y-2">
            <CardDescription>
              1. 安装必要的依赖: <code className="bg-gray-100 px-1 rounded">npm install tailwindcss-animate class-variance-authority clsx</code>
            </CardDescription>
            <CardDescription>
              2. 安装 shadcn CLI: <code className="bg-gray-100 px-1 rounded">npm install -D shadcn</code>
            </CardDescription>
            <CardDescription>
              3. 初始化项目: <code className="bg-gray-100 px-1 rounded">npx shadcn@latest init</code>
            </CardDescription>
            <CardDescription>
              4. 添加组件: <code className="bg-gray-100 px-1 rounded">npx shadcn@latest add button</code>
            </CardDescription>
            <CardDescription>
              5. 在组件中导入使用: <code className="bg-gray-100 px-1 rounded">&#123; Button &#125; from &quot;@/components/ui/button&quot;</code>
            </CardDescription>
          </div>
        </CardContent>
      </Card>
    </div>
  );
}